<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
body, html{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-family:"微软雅黑";
        }
		#l-map{
            height:400px;
            width:100%;
        }
		#r-result,#r-result table{
            width:100%;
        }
</style>  
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=cjUbKbGLi0bj3G1ECG3AMdwNxSKwmVLh">
//v3.0版本的引用方式：src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
</head>  
 
<body>  
<!-- <div id="container"></div>  -->
<div id="l-map"></div>
	<div id="r-result"></div>
<script type="text/javascript"> 
// var map = new BMap.Map("container"); 
// map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
// var driving = new BMap.WalkingRoute(map, { 
//     renderOptions: { 
//         map: map, 
//         autoViewport: true 
//     }
// });
// var start = new BMap.Point(116.310791, 40.003419);
// var end = new BMap.Point(116.486419, 39.877282);
// driving.search(start, end);

var map = new BMap.Map("l-map");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
	var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
	walking.search("西单", "慈云寺");
</script>  
</body>  
</html>